<script>
export default {
  name: 'DMenuItem',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    }
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    },
    getClassName() {
      const className = 'tw-menu-item';
      const selectedClassName = `${className} tw-menu-item-selected`;

      const currentKey = this.$vnode.key;
      const selectedKeys = this.$parent.$parent.selectedKeys;

      if (selectedKeys) {
        return selectedKeys.findIndex(i => i === currentKey) > -1
          ? selectedClassName
          : className;
      }
      return className;
    }
  },
  render() {
    const props = {
      disabled: this.disabled
    };
    if (this.title) {
      props.title = this.title;
    }

    const on = {
      click: this.handleClick
    };

    const className = this.getClassName();
    return (
      <a-menu-item props={props} on={on} class={className}>
        {this.$slots.default}
      </a-menu-item>
    );
  }
};
</script>

<style lang="scss" scoped></style>
